<template>
  <view class="activity_wrapper">
    <view class="activity_item" v-for="(item,index) in dataArrS" :key="index" @click="activityDetail(item)">
      <view class="act_top">
        <image class="leftImg" mode="aspectFill" :src=" `${item.image_url}` "></image>
        <view class="status_container1">
          <view class="title1">{{item.title}}</view>
          <view class="title2">
            <image class="biao" mode="widthFix" src="@/static/images/time.png"></image>
            <text class="txt"> {{item.acticity_s_time}} </text>
            <!-- 						<text class="txt">{{$util.timestampToTime(item.acticity_s_time*1000)}}</text>					 -->
          </view>
          <view class="title2">
            <image class="biao" mode="widthFix" src="@/static/images/location.png"></image>
            <text class="txt">{{item.address_area || ''}}</text>
          </view>
          <view class="avatar_container">
						           
            <!-- <image class="avatarImg" mode="aspectFill" :class="index1>0?'left':''" v-for="(item1,index1) in item.users && item.users.slice(0, 5)" :key="index1"
              :src="item1.info && item1.info.avatar"></image> -->
            <view class="num">{{item.users ? item.users.length : (item.enroll_count || 0)}}人报名</view>
          </view>
        </view>
      </view>

      <view style="display: flex;justify-content: flex-end;transform: translateX(30rpx);height: 54rpx;;">
        <view class="utitle" v-if="item.b_status==1">预约/暂停开放/已约满</view>
        <view class="utitle" v-if="item.b_status==2">{{item.b_desc}}暂停开放</view>
        <view class="utitle" v-if="item.b_status==3 && item.h_status!=3">{{item.b_desc}}</view>
        <!-- 活动结束 -->
        <view class="utitle over" v-if="item.b_status==3 && item.h_status==3">{{item.h_desc}}</view>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataArrS: []
      }
    },
    props: {
      dataArr: {
        type: Array,
        require: true,
        default: []
      }
    },
    watch: {
      dataArr: {
        immediate: true,
        deep: true,
        handler(val, oldVal) {
          this.$set(this, 'dataArrS', val)
        },
      },
    },
    methods: {
      getTime(value) {
        value = value * 1000
        return timestampToTime(value)
      },
      activityDetail(item) {
				// if (!uni.getStorageSync('userInfo')) {
				//   uni.navigateTo({
				//     url: '/pages/login/login'
				//   })
				// 	return
				// }
        uni.navigateTo({
          url: `/pages/function/detail?id=${item.id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .activity_wrapper {
    // background: $UNI-backgroundColor;

    .activity_item {
      padding: 30rpx 30rpx 0rpx 30rpx;
      background: white;
      // box-shadow: 1rpx 1rpx 5rpx 1rpx #ccc;
      border-radius: 20rpx;
      overflow: hidden;
      margin-bottom: 36rpx;

      .act_top {
        display: flex;

        .leftImg {
          width: 248rpx;
          height: 232rpx;
          background: #eee;
          border-radius: 10rpx;
        }

        .status_container1 {
					flex: 1;
          padding: 10rpx 0rpx;
          padding-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title1 {
            color: #252525;
            font-weight: bold;
            font-size: 28rpx;
          }

          .title2 {
            color: #575757;
            padding-top: 10rpx;
            display: flex;
            align-items: baseline;

            .biao {
              width: 22rpx;
            }

            .txt {
              font-size: 26rpx;
              padding-left: 10rpx;
							flex: 1;
            }
          }

          .avatar_container {
						width: 340rpx;
            padding-top: 15rpx;
            display: flex;
            align-items: center;

            .num {
              padding-left: 10rpx;
              color: #575757;
              font-size: 24rpx;
              min-width: 100rpx;
            }

            .avatarImg {
              width: 50rpx;
              height: 50rpx;
              border-radius: 50rpx;
              border: 3rpx solid white;
							background: #CCC;
            }

            .left {
              margin-left: -13rpx;
            }
          }
        }
      }
    }
  }

  .utitle {
    display: inline-block;
    border-top-left-radius: 15rpx;
    background: linear-gradient(43deg, #E1EFFF 0%, #FFFFE4 100%);
    width: 143rpx;
    height: 54rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: bold;
    color: #575757;

  }
	.over{
		background: #DADADA !important;
		color: white !important;
	}
</style>